<template>
	<view class="goodsSwiperBox">
		<swiper class="gswSw" v-if="datas&&datas.length>0" :display-multiple-items="config.multiple||3" :autoplay="config.autoplay"
		 next-margin="100rpx" @change="swiperChange" :disable-touch="disable">
			<swiper-item @click="getLinkTo(list.id)" v-for="(list,i) in datas" :key="i">
				<view class='swiper-item gswGoods' data-type="goods" :data-id="list.id" :data-index="i">
					<image :src='list.img'></image>
					<view class='goodsTxt'>{{list.title}}</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "goodsSwiper",
		props: {
			datas: {},
			config: {}
		},
		data() {
			return {
				current: 0,
				disable: this.datas.length < (this.config.multiple || 3) //App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
			}
		},
		created() {
			console.log(this.datas)
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
				this.$emit("change", e.detail.current)
			},
			// tapFun(e) {
			// 	var type = e.currentTarget.dataset.type,
			// 		id = parseInt(e.currentTarget.dataset.id) || 0,
			// 		index = parseInt(e.currentTarget.dataset.index) || 0;
			// 	this.$emit("tapFun", {
			// 		type: type,
			// 		id: id,
			// 		index: index
			// 	})
			// },
			getLinkTo(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/tabbar/study/details/index?id=' + id + '&type=2'
				})
			}
		}
	}
</script>

<style>
	.goodsSwiperBox {
		width: 710rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 0 20rpx 0 0rpx;
		position: relative;
		box-sizing: border-box;
	}

	.goodsSwiperBox .gswTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		color: #999;
		padding-left: 10rpx;
	}

	.goodsSwiperBox .gswTitle .gswTL {
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.goodsSwiperBox .gswTitle .gswTL text:first-child {
		font-weight: bold;
		font-size: 36rpx;
		margin-right: 5rpx;
		color: #000;
	}

	.goodsSwiperBox .gswTitle .gswTL text:nth-child(2) {
		background: red;
		color: #fff;
		border-radius: 16rpx;
		line-height: 33rpx;
		font-size: 22rpx;
		padding: 0 12rpx;
	}

	.goodsSwiperBox .gswTitle .gswTR {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.goodsSwiperBox .gswTitle .gswTR image {
		width: 24rpx;
		height: 24rpx;
	}

	.gswSw {
		height: 180rpx;
		padding-bottom: 20rpx;
	}

	.gswGoods {
		margin-left: 10rpx;
		font-weight: bold;
		position: relative;
		border-radius: 20upx;
		height: 100%;
	}

	.gswGoods image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		display: block;
	}

	.gswGoods .goodsTxt {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 24rpx;
		line-height: 33rpx;
		text-align: left;
		position: absolute;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		padding-left: 6px;
		color: #fff;
		left: 0;
		border-bottom-left-radius: 10upx;
		border-bottom-right-radius: 10upx;
		box-sizing: border-box;
	}

	.gswGoods .goodsPrice {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		color: #FF3636;
		font-size: 30rpx;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
	}

	.shadowLeft {
		position: absolute;
		left: 0;
		top: 80rpx;
		width: 125rpx;
		height: 250rpx;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 225, 0));
	}

	.shadowRight {
		position: absolute;
		right: 0;
		top: 80rpx;
		width: 125rpx;
		height: 250rpx;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 225, 0));
	}
</style>
